<!--
* @Author: 张昊
* @Date: 2021-12-22 16:44:41
* @LastEditors: 张昊
* @Description: 详情:详情信息 标题五个字情况
-->

<template>
	<view class="units">
		<view class="unit">
			<view class="unit-title">{{ perform.title }}</view>
			<view class="unit-text" :style="{ color: color }">{{ perform.text }}</view>
		</view>
		<!-- 右侧的功能 -->
		<view class="fun"><txt-fun ref="fun" v-for="(it, i) in perform.fun" :key="i" :it="it" @click.native="click(it)" /></view>
	</view>
</template>

<script>
export default {
	props: {
		perform: {
			type: Object
		}
	},
	data() {
		return {
			color: '',
			showTransition: false
		};
	},
	methods: {
		fun() {
			switch (this.perform.text) {
				case '启用/转正':
				case '申请成功':
				case '审批完成':
				case '开':
				case '审核通过':
				case '自用':
				case '正常':
					this.color = '#00B900';
					break;
				case '审核中':
				case '试用':
				case '申请中':
				case '审批中':
				case '他用':
					this.color = '#FAB600';
					break;
				case '异常':
				case '停用/离职':
				case '驳回':
				case '关':
					this.color = '#F11821';
					break;
			}
		}
	},
	mounted() {
		this.fun();
		setTimeout(() => {
			this.showTransition = true;
		}, 100);
	}
};
</script>

<style scoped lang="scss">
.units {
	display: flex;
	justify-content: space-between;
	padding-top: 28rpx;
	.funs {
		display: flex;
		.fun {
			padding-left: 14 * 2rpx;
		}
	}
}
.unit {
	display: flex;
	font-size: $uni-font-title;
	color: #333333;
	height: 42rpx;
	.unit-title {
		display: inline-block;
		width: 160rpx;
		text-align: justify;
		overflow: hidden;
		font-weight: 600;
		color: #333333;
	}
	.unit-title:after {
		content: '';
		display: inline-block;
		width: 100%;
	}
	.unit-text::before {
		content: ':';
		font-weight: 600;
		color: #333333;
		padding-right: 14rpx;
		display: inline-block;
	}
	.unit-text {
		display: inline-block;
	}
}
</style>
